<script setup>
import { ref, watch } from 'vue'
// import MyWorker from '@renderer/utils/worker-blob?worker&inline'

// const worker = new MyWorker()

const _props = defineProps({
  file: {
    type: Object,
    default: () => {}
  }
})

const src = ref('')
const filename = ref('')

watch(
  () => _props.file,
  (newVal) => {
    // const { buffer, _mediaType: type, _name } = newVal
    // worker.postMessage({
    //   buffer,
    //   type
    // })
    // worker.onmessage = (e) => {
    //   src.value = e.data
    // }
    // src.value = createBlobUrl(newVal.buffer, newVal._mediaType)
    const { filePath, _name } = newVal
    src.value = filePath
    filename.value = _name
  },
  { immediate: true }
)
</script>

<template>
  <div class="w-full py-1">
    <el-text
      v-if="!src"
      class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap px-4 py-2"
      size="default"
      type="warning"
      ><el-icon class="mr-1"><List /></el-icon>{{ filename }} - 接收处理中</el-text
    >
    <a v-else :name="filename" :download="filename" :href="src" rel="noopener noreferrer">
      <el-text
        class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap px-4 py-2"
        size="default"
        type="warning"
        ><el-icon class="mr-1"><List /></el-icon>{{ filename }}</el-text
      >
    </a>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-image-viewer__close) {
  width: 36px;
  height: 36px;
  margin-top: 20px;
}
</style>
